// 获取canvas节点元素
const oCan = document.getElementById('can');

/**
 * 获取canvas的上下文,
 * getContext() => 参数:2d => Canvas API
 *                      webgl => WebGL API
 * */ 
const ctx = oCan.getContext('2d');

// 获取屏幕宽高
const clientWidth = document.documentElement.clientWidth;
const clientHeight = document.documentElement.clientHeight;

// 给canvas设置宽高, 记住canvas里就有width/height属性，不在style下，不用加单位
oCan.width = clientWidth;
oCan.height = clientHeight;

// 画线条：stroke 
// 填充颜色：fill

ctx.strokeStyle = '';
ctx.filStyle = '';

// 线段头的样式
ctx.lineCap = 'round';

// 交叉头的样式
ctx.lineJoin = 'round';

// 线段的宽度
ctx.lineWidth = 2;

// 画一个三角形
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(300, 300);
ctx.lineTo(500, 200);
ctx.lineTo(100, 100);
ctx.stroke();

// 画一个圆
ctx.beginPath();
// ctx.moveTo(450, 400);
ctx.arc(400, 400, 50, 0, 2 * Math.PI, false);
ctx.stroke();
// 填充
ctx.fill();

// 画一个半圆
// 填充
ctx.beginPath();
ctx.arc(200, 400, 50, 0, Math.PI, false);
ctx.moveTo(250, 400);
ctx.lineTo(150,400);
ctx.stroke();
ctx.fill();